<template>
  <div class="main-content">
    <!-- 商品总数 -->
    <el-main class="main-total">
      <el-row type="flex" :gutter="10" class="row-bg" justify="space-around">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <dl>
              <dt><span class="el-icon-tickets"></span></dt>
              <dd>
                <p>今日订单总数</p>
                <p><span>300</span></p>
              </dd>
            </dl>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <dl>
              <dt><span class="el-icon-sold-out"></span></dt>
              <dd>
                <p>今日销售总额</p>
                <p><span>￥ 2000.0</span></p>
              </dd>
            </dl>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <dl>
              <dt><span class="el-icon-sell"></span></dt>
              <dd>
                <p>昨日销售总数</p>
                <p><span>￥ 3000.0</span></p>
              </dd>
            </dl>
          </div>
        </el-col>
        <el-col :span="6"></el-col>
      </el-row>
    </el-main>

    <!-- 待处理事务 -->
    <el-main class="main-affairs">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>待处理事务</span>
        </div>

        <el-row type="flex" class="row-bg" justify="space-between" v-for="(item1, index) in numList" :key="index">
          <el-col :span="6" v-for="(item, index) in list.slice(item1.num1, item1.num2)" :key="index">
            <p class="order-data">
              <span>{{ item.title }}</span> <span>({{ item.num }})</span>
            </p>

            <div class="grid-content bg-purple"></div>
          </el-col>
        </el-row>
      </el-card>
    </el-main>

    <!-- 商品总览 -->
    <el-main class="main-overview">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>商品总览</span>
              </div>
              <div class="overview-cdy">
                <ul>
                  <li v-for="(item, index) in overList" :key="index">
                    <span>{{ item.quantity }}</span>
                    <p>{{ item.property }}</p>
                  </li>
                </ul>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>用户总览</span>
              </div>
              <div class="overview-cdy">
                <ul>
                  <li v-for="(item, index) in userOver" :key="index">
                    <span>{{ item.quantity }}</span>
                    <p>{{ item.property }}</p>
                  </li>
                </ul>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <!-- 商品总览图表 -->
    <el-main class="main-chart">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>订单统计</span>
        </div>
        <el-row :gutter="10">
          <el-col :span="4">
            <div class="grid-content bg-purple"></div>
            <div class="text item">
              <!-- <p>{{ "本月订单总数" + o }}</p>
              <p style=" font-weight: bold;">{{ "10000" }}</p>
              <p>{{" +10%同比上月"}}</p> -->
                
               <p>本月订单总数</p>
               <p>{{}}</p>
               <p>+10%同比上月</p>
               <p>本周订单总数</p>
               <p>1000</p>
               <p>-10%同比上周</p>
               <p>本月销售总额</p>
               <p>100000</p>
               <p>+10%同比上月</p>
               <p>本周销售总额</p>
               <p>50000</p>
               <p>-10%同比上周</p>
                 
            </div>
          </el-col>
          <el-col :span="20">
    <el-row>
     <el-col>
       <div class="block dataBox" >
        
         <el-date-picker v-model="value1"  type="daterange" range-separator="至" start-placeholder="开始日期"
           end-placeholder="结束日期">
         </el-date-picker>
       </div>
     
     </el-col>
    
    </el-row>
            <div class="grid-content bg-purple">
              <div>
                <ve-line :data="chartData" :settings="chartSettings"></ve-line>
              </div>
            </div>

          </el-col>

        </el-row>

      </el-card>
    </el-main>
  </div>
</template>

<script>
  export default {
    name: "Home",
    data() {

      return {

        list: [], //待处理事务
        overList: [],
        userOver: [], //用户总览
        orderList: [], //所有订单
          chartData: {
          columns: ["orderData","orderCount","orderAmount"],
          rows: [],
               },
          orderCountData: [],//日期0开始 1结束
          chartSettings: {
          xAxisType: 'time',
            axisSite: {
              right: ["orderAmount"]
            },
            area: true,
          },


        numList: [{
            num1: 0,
            num2: 3
          },
          {
            num1: 3,
            num2: 6
          },
          {
            num1: 6,
            num2: 9
          }
        ],

 value1: '',
 
      };
    },

    watch: {
      value1(){
       this.chartData.rows = this.orderList.filter((value, index) => {
       var data = new Date(value.orderData);
       return data >= this.value1[0] && data <= this.value1[1] })
      
      }
    },
    methods: {
      async paddingList() {
        const {
          data: res
        } = await this.axios.get(
          "http://localhost:3030/paddingList"
        );
        this.list = res;
        // console.log(this.list);
      },
      async overviewList() {
        const {
          data: res
        } = await this.axios.get(
          "http://localhost:3030/OverviewList"
        );
        this.overList = res;
        // console.log(this.overList);
      },
      async userOverview() {
        const {
          data: res
        } = await this.axios.get(
          "http://localhost:3030/userOverview"
        );
        this.userOver = res;
        // console.log(this.userOver);






      },
    },
    created() {
      this.axios.get("http://localhost:3030/getorder")
        .then(res => {
          // console.log(res)
          this.orderList = res.data
          // console.log(this.orderList);
          var curDate = new Date();
          var staDate = new Date(curDate.getFullYear(), curDate.getMonth(), 1);
          var endDate = new Date(curDate.getFullYear(), curDate.getMonth(), 7)
          this.orderCountData.push(staDate);
          this.orderCountData.push(endDate);
          console.log( this.orderCountData);
       
          //清空
          //过滤筛选
          this.chartData.rows = this.orderList.filter((value, index) => {
            var data = new Date(value.orderData);
            return data >= this.orderCountData[0] && data <= this.orderCountData[1]
          })
        }).catch(err => {
          console.error(err);
        })
    },
    mounted() {
      this.paddingList(), this.overviewList();
      this.userOverview();
    },
    computed: {
    curMonthOrderCount() { //本月的订单总数
    var curMonth = (new Date()).getMonth();
    return this.getOrderCount(curMonth)
    },
    curMonthRG() {
    //本月订单总数
    var curDate = new Date();
    var curMonth = curDate.getMonth(); //本月月数
    var curMonthOrderCount = this.getOrderCount(curMonth);
    console.log('curMonth',curMonth);
    //上月订单总数
    var lastMonth = (new Date(curDate.setMonth(curMonth - 1))).getMonth();
    console.log('lastMonth',lastMonth);

    var lastMonthOrderCount = this.getOrderCount(lastMonth);
    var result = (curMonthOrderCount - lastMonthOrderCount) / lastMonthOrderCount;
    return result.toFixed(2) * 100 + '%';

    },
    curWeekOrderCount() { //本周的订单总数
    /* 获取本周的所有订单 */
    var curDate = (new Date()).getDate(); //本月的日期
    var curWeekNum = (new Date()).getDay(); //本周第几天
    var start = new Date();
    start.setDate(curDate - curWeekNum + 1);
    start.setHours(0);
    start.setMinutes(0);
    start.setSeconds(0);
    var end = (new Date()).setDate(curDate + (7 - curWeekNum));
    console.log(new Date(start), new Date(end));
    var curWeekOrder = this.orderList.filter((value) => {
    let orderDate = new Date(value.orderDate);
    return orderDate >= start && orderDate <= end; }); 
      curWeekOrder.reduce((pre, cur)=> {
      return pre + cur.orderCount;
      }, 0)

      }
  }
  }
</script>

<style lang="less" scoped>
  .main-content {
    .main-total {
      .el-row {
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .el-col {
        border-radius: 4px;
      }

      .grid-content {
        border-radius: 2px;
        min-height: 100px;
        border: 1px solid rgb(163, 159, 160);

        dl {
          display: flex;
          justify-content: space-around;

          dt>span {
            font-size: 60px;
            color: rgb(76, 126, 219);
          }

          dd {
            p {
              margin: 0;
              text-align: left;
              padding: 5px;

              span {
                font-weight: bolder;
              }
            }
          }
        }
      }

      .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
      }
    }

    //事务
    .main-affairs {
      .text {
        font-size: 14px;
      }

      .item {
        margin-bottom: 18px;
      }

      .clearfix:before,
      .clearfix:after {
        display: table;
        content: "";
      }

      .clearfix:after {
        clear: both;
      }

      .box-card {
        width: 100%;
        height: 300px;
      }

      .order-data {
        display: flex;
        justify-content: space-between;

        span:last-child {
          color: red;
        }
      }
    }

    //总览
    .main-overview {
      .el-row {
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .el-col {
        border-radius: 4px;
      }

      .grid-content {
        border-radius: 4px;
        min-height: 36px;

        .overview-cdy {
          ul {
            display: flex;
            justify-content: space-around;

            li {
              list-style: none;
              text-align: center;

              span {
                font-weight: bold;
                color: red;
              }
            }
          }
        }
      }

      .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
      }
    }

    .main-chart {
      color: #ffae00;

     .text{
       p{
       padding: 0;
       margin: 0;
      
       }
    }
      .dataBox{
      text-align: right;
      }
    }
  }

</style>
